<template>
    <div class="main">
        <header class="header">
            <slot name="header"></slot>
        </header>
        <main class="center">
            <slot></slot>
        </main>
        <footer class="footer">
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

<script>
export default {
    data() {
        return {}
    },
    methods: {}
}
</script>

<style scoped lang="less">
.main {
    height: 100%;
    display: flex;
    flex-direction: column;
    .header {
        flex: 0 0 140px;
        color: #fff;
        background: #5b7daf;
    }
    .center {
        flex: 1;
        background: #ccc;
    }
    .footer {
        background-color: #6ab5fa;
        flex: 0 0 200px;
    }
}
</style>
